import getComponentRootDom from "./getComponentRootDom";
import Icon from "@/components/Icon";
import styles from "./showMessage.module.less";
/**
 * 弹出消息
 * @param {String} content          消息内容
 * @param {String} type             消息类型
 * @param {number} duration         弹出框的消失时间
 * @param {HTMLElement} container   容器，消息会显示到你给的容器的正中间 ，如果不传默认body
 */
export default function (options = {}) {
    //options = {}
    const content = options.content || "";                  //如果不传 默认值为空
    const type = options.type || "info";                    //如果不传 默认值为info 
    const duration = options.duration || 2000;              //如果不传 默认值为2秒
    const container = options.container || document.body;   //如果不传 默认值为body

    var div = document.createElement("div");                //创建消息元素
    const iconDom = getComponentRootDom(Icon, {             //获取Icon 组件的根元素
        type,                                               //传入属性
    });
    console.log(iconDom);                                   //打印出 我们获取到的组件根元素
    div.innerHTML = `<span class="${styles.icon}"> ${iconDom.outerHTML}</span> <div>${content}</div>`;   //将获取到的icon组件 加到div里面

    div.className = `${styles.message} ${styles["message-" + type]} `                                    //设置内样式


    //查看容器的position 是否改动过
    if(options.container) {                                         //如果传递过container 那我就不设置父元素的position
        if (getComputedStyle(container).position === "static") {    //如果父元素的container 没有传递我就判断父元素的position 是不是 static
            container.style.position = "relative";                  //如果父元素的position 是static 的话 那么我们把父元素的position 设置为 relative
        }
    }

    container.appendChild(div);
    //console.log(div);                                       //打印div

    //强行渲染 才会有过渡效果
    div.clientHeight;//导致reflow

    //回归到正常位置
    div.style.opacity = 1;
    div.style.transform = `translate(-50%, -50%)`

    //设置定时器 设定一段时间后消失
    setTimeout(() => {
        div.style.opacity = 0;
        div.style.transform = `translate(-50%, -50%) translateY(-25px)`;
        div.addEventListener(
            "transitionend",
            function () {
                div.remove();
                // 运行回调函数
                options.callback && options.callback();
            }, { once: true })
    }, duration)
}